<template>
	<view class="goods-items" @tap="goDetails">
		<image :src="goodsInfo.thumb_url?goodsInfo.thumb_url:goodsInfo.thumb" class="goods-avatar" />
		<view class="content">
			<view class="goods-info">
				<view class="goods-name" :style="{width: w}"> {{goodsInfo.goods_name}} </view>
				<view class="spec"> 规格：{{goodsInfo.spece_content?goodsInfo.spece_content:goodsInfo.spece_value_title?goodsInfo.spece_value_title:'默认规格'}}  </view>
				<view class="price"> ￥<text>{{goodsInfo.price=='0.00'?'面议':goodsInfo.price}}</text> </view>
			</view>
			<view class="num" v-if="isNum"> x{{goodsInfo.num}} </view>
		</view>
	</view>
</template>

<script setup>
	import { computed } from 'vue'
	const props = defineProps({
		goodsInfo: {
			type: Object
		},
		isNum: {
			type: Boolean,
			default: true
		},
		nav: {
			type: Boolean,
			default: true
		}
	})
	const { safeArea } = uni.getSystemInfoSync()
	const w = computed(() => (safeArea.width - 158) + 'px' )
	const goDetails = () => {
		if(props.goodsInfo.spu&&props.nav) {
			uni.navigateTo({
				url: `/pages/productDetails/productDetails?spu=${props.goodsInfo.spu}`
			})
		}
	}
</script>

<style scoped lang="scss">
	.goods-items {
		// padding: 10px 12px;
		// border-radius: 10px;
		display: flex;
		margin-bottom: 10px;
		background-color: #fff;
		&:nth-last-of-type(1) {
			margin-bottom: 0;
		}
		.goods-avatar {
			width: 80px;
			height: 80px;
			margin-right: 10px;
			border-radius: 10px;
		}
		.content {
			flex: 1;
			display: flex;
			justify-content: space-between;
			align-items: end;
			.goods-info {
				.goods-name {
					color: #333333;
					font-size: 16px;
					font-weight: 500;
					overflow: hidden;
					line-height: 24px;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				.spec {
					height: 16px;
					color: #999999;
					font-size: 12px;
					margin-top: 3px;
					font-weight: 400;
					line-height: 16px;
				}
				.price {
					color: #FF3B1E;
					font-size: 10px;
					margin-top: 15px;
					font-weight: bold;
					line-height: 20px;
					text {
						font-size: 15px;
					}
				}
			}
			.num {
				color: #999999;
				font-size: 12px;
				font-weight: 400;
			}
		}
	}
</style>